<template>
  <div class="park-detail-bottom-left-wrapper">
    <LayoutTabsAnchor :data-list="tabsList" :current-tab.sync="currentTab">
      <!-- <template v-for="item in tabsList" #[item.value]>
        <div :id="item.value" :ref="item.value" :key="item.value" class="tab-item-content">
          <component :is="item.value" :label="item.label" />
        </div>
      </template> -->

      <BaseInfo
        id="BaseInfo"
        ref="BaseInfo"
        label="基本信息"
        :data-obj="baseInfoData"
        class="mb-[20px]"
      />

      <IndustryInfo
        id="IndustryInfo"
        ref="IndustryInfo"
        label="产业情况"
        :data-list="industryInfoData"
        class="mb-[20px]"
      />

      <IndustrySupport
        id="IndustrySupport"
        ref="IndustrySupport"
        label="产业配套"
        :data-obj="industrySupportData"
        class="mb-[20px]"
      />

      <ProductionCost
        id="ProductionCost"
        ref="ProductionCost"
        label="生产成本"
        :data-obj="dataObj"
        :data-list="productionCostData"
        class="mb-[20px]"
      />

      <PeripheralSupport
        id="PeripheralSupport"
        ref="PeripheralSupport"
        label="生活配套"
        :lng-lat="lngLat"
        :name="parkName"
        :geojson="geojson"
      />

      <!-- <template #BaseInfo> </template>

      <template #IndustryInfo> </template>

      <template #IndustrySupport> </template>

      <template #ProductionCost> </template>

      <template #PeripheralSupport> </template> -->
    </LayoutTabsAnchor>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import LayoutTabsAnchor from '@/components/portal/LayoutTabsAnchor.vue'
import BaseInfo from '@/components/portal/park/BaseInfo.vue'
import IndustryInfo from '@/components/portal/park/IndustryInfo.vue'
import IndustrySupport from '@/components/portal/park/IndustrySupport.vue'
import ProductionCost from '@/components/portal/park/ProductionCost.vue'
import PeripheralSupport from '@/components/portal/PeripheralSupport.vue'
export default Vue.extend({
  components: {
    LayoutTabsAnchor,
    BaseInfo,
    IndustryInfo,
    IndustrySupport,
    ProductionCost,
    PeripheralSupport,
  },
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentTab: null,
      tabsList: [
        {
          label: '园区信息',
          value: 'All',
        },
      ],
      tabsList2: [
        {
          label: '基本信息',
          value: 'BaseInfo',
        },
        {
          label: '产业情况',
          value: 'IndustryInfo',
        },
        {
          label: '产业配套',
          value: 'IndustrySupport',
        },
        {
          label: '生产成本',
          value: 'ProductionCost',
        },
        {
          label: '周边配套',
          value: 'PeripheralSupport',
        },
      ],
    }
  },
  computed: {
    productionCostData() {
      const {
        powerFee,
        gasFee,
        waterFee,
        steamFee,
        sewageFee,
        ordinaryWorkerLabel,
        intermediateTechnicianLabel,
        seniorTechnicianLabel,
        buildingRent,
        buildingPrice,
        workshopRent,
        workshopPrice,
        depositoryRent,
        depositoryPrice,
      } = this.dataObj || {}
      const defaultData = [
        {
          label: '电价',
          value: powerFee || '--',
          unit: '元/月',
        },
        {
          label: '峰值天然气',
          value: gasFee || '--',
          unit: '元/立方米',
        },
        {
          label: '水价',
          value: waterFee || '--',
          unit: '元/吨',
        },
        {
          label: '峰值蒸汽价',
          value: steamFee || '--',
          unit: '元/立方米',
        },
        {
          label: '污水处理价',
          value: sewageFee || '--',
          unit: '元/吨',
        },
        {
          label: '普通工人',
          value: ordinaryWorkerLabel || '--',
          unit: '',
        },
        {
          label: '中级技术员',
          value: intermediateTechnicianLabel || '--',
          unit: '',
        },
        {
          label: '高级技术员',
          value: seniorTechnicianLabel || '--',
          unit: '',
        },
        {
          label: '写字楼租金',
          value: buildingRent || '--',
          unit: '元/平米*月',
        },
        {
          label: '写字楼售价',
          value: buildingPrice || '--',
          unit: '元/平米',
        },
        {
          label: '厂房租金',
          value: workshopRent || '--',
          unit: '元/平米*月',
        },
        {
          label: '厂房售价',
          value: workshopPrice || '--',
          unit: '元/平米',
        },
        {
          label: '仓库租金',
          value: depositoryRent || '--',
          unit: '元/平米*月',
        },
        {
          label: '仓库售价',
          value: depositoryPrice || '--',
          unit: '元/平米',
        },
      ]
      return defaultData
    },
    industrySupportData() {
      const { supportingDesc, infrastructure } = this.dataObj
      return {
        supportingDesc,
        infrastructure,
      }
    },
    industryInfoData() {
      const { mainIndustryLabel, intendedIndustryLabel, prohibitIndustry, industryDesc } =
        this.dataObj
      return [
        {
          label: '主导产业',
          value: (mainIndustryLabel && mainIndustryLabel.join(',')) || '--',
        },
        {
          label: '意向产业',
          value: (intendedIndustryLabel && intendedIndustryLabel.join(',')) || '--',
        },
        // {
        //   label: '禁入产业',
        //   value: prohibitIndustry || '--',
        // },
        {
          label: '产业介绍',
          value: industryDesc || '--',
        },
      ]
    },
    baseInfoData() {
      const {
        parkAdvantage,
        parkPlanning,
        typeLabel,
        traffic,
        planArea,
        levelLabel,
        doneArea,
        economicTypeLabel,
        parkHonor,
        parkServices,
      } = this.dataObj
      return {
        parkServices: parkServices || '--',
        parkAdvantage: parkAdvantage || '--',
        parkPlanning: parkPlanning || '--',
        traffic: traffic || '--',
        keysList: [
          {
            label: '所在区县',
            value: this.belongDistrictLabel || '--',
            unit: '',
          },
          {
            label: '规划面积',
            value: planArea || '--',
            unit: '平方公里',
          },
          {
            label: '园区级别',
            value: levelLabel || '--',
            unit: '',
          },
          {
            label: '建成面积',
            value: doneArea || '--',
            unit: '平方公里',
          },
          {
            label: '园区类型',
            value: typeLabel || '--',
            unit: '',
          },
          {
            label: '经济类型',
            value: economicTypeLabel || '--',
            unit: '',
          },
        ],
        parkHonor,
      }
    },
    belongDistrictLabel() {
      const label = this.dataObj.belongDistrictLabel
      return (label && label.join('')) || '--'
    },
    lngLat() {
      const { position } = this.dataObj
      return position || ''
    },
    parkName() {
      return this.dataObj.name
    },
    geojson() {
      const { scopeLine } = this.dataObj
      if (scopeLine && Array.isArray(scopeLine)) {
        return scopeLine[0]?.url || ''
      }
      return ''
    },
  },
  watch: {
    currentTab(tab) {
      this.$nextTick(() => {
        console.log(this.$refs[tab.value].$el)
        // this.$refs[tab.value].$el.scrollIntoView()
      })
    },
  },
  mounted() {},
})
</script>
<style lang="scss" scoped>
.park-detail-bottom-left-wrapper {
  background-color: #fff;
}
</style>
